import { ProTableColumn } from '@/components/pro-table/type'
import { NButton, NPopconfirm } from 'naive-ui'
import Icons from '@/components/icons/index.vue'
import { FuncTypeEnum } from '../enum'

type props = {
  handleAddChildFunc: (row: any) => void
  handleDelFunc: (id) => void
  handleEditFunc: (row: any) => void
}

export const useFuncProTable = ({
  handleAddChildFunc,
  handleDelFunc,
  handleEditFunc
}: props) => {
  const columns: ProTableColumn[] = [
    {
      title: '资源名称',
      key: 'funcName',
      align: 'left',
      className: 'func-name'
    },
    {
      type: 'tag',
      title: '资源类型',
      key: 'funcType',
      dictOptions: [
        {
          value: 1,
          label: '目录',
          type: 'info'
        },
        {
          value: 2,
          label: '菜单',
          type: 'success'
        },
        {
          value: 3,
          label: '按钮',
          type: 'primary'
        }
      ]
    },
    {
      title: '图标',
      key: 'funcIcon',
      render(row) {
        return row.funcIcon ? <Icons name={row.funcIcon} size="20" /> : '--'
      }
    },
    // {
    //   title: '权限标识',
    //   key: 'funcPerms'
    // },
    {
      title: '路由地址',
      key: 'url'
    },
    {
      title: '组件名称',
      key: 'compName',
      displayValue(row) {
        return row['compName'] || '--'
      }
    },
    {
      title: '排序',
      key: 'sortOrder'
    },

    {
      type: 'operation',
      title: '操作',
      key: 'actions',
      width: 170,
      render(row) {
        return (
          <>
            <NButton
              size="small"
              type="primary"
              quaternary
              onClick={() => handleEditFunc(row)}
            >
              修改
            </NButton>
            <NButton
              size="small"
              type="primary"
              quaternary
              onClick={() => handleAddChildFunc(row)}
              disabled={row.funcType === FuncTypeEnum.button}
            >
              新增
            </NButton>
            <NPopconfirm onPositiveClick={() => handleDelFunc(row.id)}>
              {{
                trigger: () => (
                  <NButton size="small" type="error" quaternary>
                    删除
                  </NButton>
                ),
                default: () => '您确定要删除？'
              }}
            </NPopconfirm>
          </>
        )
      }
    }
  ]

  return {
    columns
  }
}
